<template>
  <div class="top-box">

  <div class="img-section" v-if="srcList.length > 0">
    <div class='preview-btn' v-if="srcList.length <= 4">
      <div class='pre-btn'>
        <el-button circle icon="ArrowLeft" @click="scrollLeft" />
      </div>
      <div class='next-btn'>
        <el-button circle icon="ArrowRight" @click="scrollRight" />
      </div>
    </div>

    <div v-else>
      <div class='pre-btn'>
        <el-button circle icon="ArrowLeft" @click="scrollLeft" />
        <el-button circle icon="DArrowLeft" @click="scrollLeftX4" />
      </div>
      <div class='next-btn'>
        <el-button circle icon="ArrowRight" @click="scrollRight" />
        <el-button circle icon="DArrowRight" @click="scrollRightX4" />
      </div>
    </div>
    <div class="img-list" ref="containerRef">




      <div class="img-warp" v-for="(item, index) of srcList" :key="index"   :style="{ 'boxShadow': showFlagIndex === index ? '0 6px 16px 2px  rgba(7, 12, 20, 0.8)' : '' }">
        <div class="section-id">
          {{ item.id }}
        </div>
        <el-image style="width: 435px; height: 327px" :src="item.path"  fit="cover"
          @click="viewImageList(index)" />
        <!-- 复制 -->
        <div class="img-id">
          <CopyButton :text="item.name" />
        </div>
      </div>
    </div>
  </div>

  <div class="upload-box" v-else>
    <div class="upload-icon">
      <el-image :src="uploadImage" style="width: 120px; height: 120px" :preview-src-list="[uploadImage]" />
    </div>
    <div class="upload-btn">
      <label htmlFor="chooseF">
        <button @click="handleClickUpload">点击上传图片文件</button>
        <input style="display: none" type="file" id="chooseF" accept="image/*" @input="handleChoose" multiple />
      </label>
    </div>
  </div>

  <el-dialog
    v-model="dialogVisible"
    :title=" srcList[showFlagIndex]?.name "
    width="80%"
    top="10px"
    :style="{ cursor: 'move', width: 1920 *CounterStore.rate  *0.9, height: 1080 * CounterStore.rate *0.9 }"
  >
  <div class='preview-btn' >
      <div class='pre-btn'>
        <el-button circle icon="ArrowLeft" @click="scrollLeft" />
      </div>
      <div class='next-btn'>
        <el-button circle icon="ArrowRight" @click="scrollRight" />
      </div>
</div>
  <div class="image-box">

    <el-image style="width: 1400px; height: 700px" :src="srcList[showFlagIndex].path" :preview-src-list="[srcList[showFlagIndex].path]" />
  </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCopy( srcList[showFlagIndex]?.name)">
          复制名称
        </el-button>
      </span>
    </template>
  </el-dialog>


</div>

</template>
<script lang="ts" setup>
import uploadImage from "../../../assets/icon_upload.svg";
import { storage } from "../../../utils";
import { ref, reactive } from "vue";
import { ElNotification } from 'element-plus'
import { useCounterStore } from '@/stores/index';
  
  const CounterStore = useCounterStore();



import CopyButton from "../../../components/CopyButton.vue"


// 图片列表
const srcList = ref([]);

  // 图片展示  dialog
  const dialogVisible = ref(false) 
  // 实现一个 图片放大展示组件
  const showFlagIndex = ref(0)


const containerRef = ref(null)

// 模拟点击 触发input 的默认事件
const handleClickUpload = (event) => {
  event.preventDefault();
  const dom = document.getElementById("chooseF");
  if (dom) {
    dom.click();
  }
};



// 选择图片
const handleChoose = (e) => {
  console.log(e.target.files);
  const filepath = e.target.files[0].path;
  console.log("filepath", filepath);

  // 保存结果文件
  const regExp = /(?<=\\)[^\\]+(?=\\[^\\]+$)/;
  const result = filepath.match(regExp);

  // 保存结果文件的 文件夹路径
  const folderPathRegex = /^(.*[\\\/])[^\\\/]+$/; // 正则表达式
  const folderPath = filepath.match(folderPathRegex)[1];

  storage.set("resultPath", result[0]);
  storage.set("folderPath", folderPath);

  const pathObj = e.target.files;

  const path = [];
  Object.keys(pathObj).forEach((key) => {
    const value = pathObj[key];
    // console.log(`Key: ${key}, Value: ${value}`);

    path.push({
      id: key,
      name: value.name,
      path: value.path,
    });
  });
  console.log(path);
  // const path = e.target.files
  // setSrcList(path)

  srcList.value = path;
};


const viewImageList = function (index) {

  console.log(index)
  showFlagIndex.value = index

  // setPreviewVisible(true)
  dialogVisible.value = true
}




// 按钮组
const scrollLeft = () => {
  if (containerRef.value) {
    containerRef.value.scrollLeft -= 435 + 12; // 向左滚动 100 像素
  }

  // 控制当前显示的图片 index
  if (showFlagIndex.value > 0) {
    showFlagIndex.value = showFlagIndex.value - 1
  }

};
const scrollLeftX4 = () => {
  if (containerRef.value) {
    containerRef.value.scrollLeft -= (435 + 12) * 4; // 向左滚动 100 像素
  }
};
const scrollRight = () => {


  if (containerRef.value) {
    containerRef.value.scrollLeft += 435 + 12; // 向右滚动 100 像素
  }

  console.log(showFlagIndex.value, 22222222)

  // 控制当前显示的图片 index
  if (showFlagIndex.value >= 0 && showFlagIndex.value < srcList.value.length - 1) {

    showFlagIndex.value = showFlagIndex.value + 1
  }
};

const scrollRightX4 = () => {
  if (containerRef.value) {
    containerRef.value.scrollLeft += (435 + 12) * 4; // 向右滚动 100 像素
  }
};



function handleCopy(text) {

navigator.clipboard.writeText(text)
  .then(() => {


    ElNotification({
    title: '提示',
    type: 'success',
    message: `复制成功! ${text}`,
    duration: 3000,
  })
    
    // Notification.success({
    //   closable: false,
    //   title: '提示',
    //   content: `复制成功! ${text}`,
    // })

    // dialogVisible.value = false

  })
  .catch((error) => {
    console.error('复制失败: ', error);
  });


}


</script>
<style scoped>
@import "./index.css";


.top-box {
  padding-top: 20px;
  height: 480px;
  width:1920px;
}
</style>
